<template>
  <div>
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item
          style="
            width: 100%;
            margin-top: 20px;
            margin-left: 30px;
            margin-bottom: 20px;
            text-align: center;
          "
        >
          <div style="float: left; margin-left: 10px">
            <el-input
              placeholder="请输入姓名/手机号/角色"
              v-model="keyword"
            ></el-input>
          </div>

          <el-button-group style="margin-left: 20px">
            <el-button
              type="primary"
              @click="selByCondition"
              icon="el-icon-search"
              >搜索</el-button
            >
            <el-button type="success" @click="reload" icon="el-icon-check"
              >所有</el-button
            >
            <el-button type="primary" @click="addWorker" icon="el-icon-edit"
              >增加</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      tooltip-effect="dark"
      style="width: 100%; margin: 20px auto"
    >
      <el-table-column
        type="index"
        :index="indexMethod"
        label="ID"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="uname"
        label="姓名"
        show-overflow-tooltip
        width="auto"
      >
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        show-overflow-tooltip
        width="auto"
      >
      </el-table-column>
      <el-table-column
        prop="r.rname"
        label="角色"
        show-overflow-tooltip
        width="auto"
      >
      </el-table-column>
      <el-table-column
        prop="birthday"
        label="年龄"
        show-overflow-tooltip
        width="auto"
      >
        <template slot-scope="scope">
          <label v-if="scope.row.birthday != undefined">{{
            scope.row.birthday | showAge
          }}</label>
        </template>
      </el-table-column>
      <el-table-column
        prop="user.phone"
        label="手机号"
        show-overflow-tooltip
        width="auto"
      >
      </el-table-column>
      <el-table-column
        prop="idCard"
        label="身份证号"
        show-overflow-tooltip
        width="auto"
      >
      </el-table-column>
      <el-table-column
        prop="salary"
        label="工资"
        show-overflow-tooltip
        width="auto"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" style="width: auto">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-setting"
            type="danger"
            @click="softdel(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
    <!-- 添加模态框开始 -->
    <el-dialog title="添加工作人员" :visible.sync="addVisable">
      <el-form ref="addForm" :model="addForm" label-width="100px">
        <el-form-item label="手机号">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="选择角色">
          <el-select v-model="addForm.rid" placeholder="选择角色">
            <el-option
              v-for="m in selRoles"
              :key="m.rid"
              :label="m.rname"
              :value="m.rid"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisable = false">取 消</el-button>
        <el-button type="primary" @click="saveAddWoker">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加模态框结束 -->
  </div>
</template>
<script>
import {
  getWorkers,
  getWorkerByCondition,
  softdelete,
  addWokers,
  selectRoles
} from "@/api/worker.js";
export default {
  data() {
    return {
      pageInfo: {
        pageSize: 5,
        pageNum: 1,
      },
      list: {},
      keyword: "",
      addForm: {},
      addVisable: false,
      selRoles:[]
    };
  },
  methods: {
    loadWorkers() {
      getWorkers(this.pageInfo).then((res) => {
        if (res.data.code == 200) {
          this.pageInfo = res.data.data;
        }
      });
    },
    //下拉框展示添加的角色
    getRoles(){
      selectRoles().then(res=>{
        if(res.data.code==200){
            this.selRoles = res.data.data;
        }
      })
    },
    //打开添加模态框
    addWorker(){
      this.addForm={};
      this.addVisable = true;
      this.getRoles();
    },
    //保存添加
    saveAddWoker() {
      addWokers(this.addForm).then((res) => {
        if (res.data.code == 200) {
          this.addVisable = false;
          alert("添加成功！");
          this.addForm = {};
          this.loadWorkers();
        }else{
          alert("已存在,请重新添加！");
        }
      });
    },
    // 重新加载所有
    reload() {
      this.loadWorkers();
    },
    //按条件模糊查询
    selByCondition() {
      var data = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        keyword: this.keyword,
      };
      getWorkerByCondition(data).then((res) => {
        if (res.data.code == 200) {
          this.pageInfo = res.data.data;
          this.keyword = "";
        }
      });
    },
    //软删除
    softdel(row) {
      softdelete(row.wid).then((res) => {
        if (res.data.code == 200) {
          alert("删除成功！");
          this.loadWorkers();
        } else {
          alert("系统异常，稍后重试！");
        }
      });
    },
    //索引
    indexMethod(index) {
      return index * 1 + 1;
    },
     handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      this.pageInfo.pageNum = 1;
      this.loadWorkers();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageInfo.pageNum = val;
      this.loadWorkers();
    },
  },
  mounted() {
    this.loadWorkers();
    this.getRoles();
  },
  //日期转年龄过滤器
  filters: {
    showAge(v) {
      // 指定日期
      let birthdays = new Date(v.replace(/-/g, "/"));
      // 当前系统日期
      let d = new Date();
      let age =
        d.getFullYear() -
        birthdays.getFullYear() -
        (d.getMonth() < birthdays.getMonth() ||
        (d.getMonth() == birthdays.getMonth() &&
          d.getDate() < birthdays.getDate())
          ? 1
          : 0);
      return age;
    },
  },
};
</script>
